<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>02JSX简介</title>
  <style></style>
</head>

<body>

  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->

  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>




  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    // 声明式编程 代码告诉计算机我要什么，让计算机自己去想如何去做

    const { Component } = React

    class Button extends Component {
      constructor(props) {
        super(props);
        // 颜色类名
        this.state = { color: 'red' };
      }
      // 更改类名
      handleChange = () => {
        const color = this.state.color === 'red' ? 'blue' : 'red';
        this.setState({ color });
      }
      // 一个带有更改类名点击事件的按钮，伴随初始值
      render() {
        return (
          <button className={`btn ${this.state.color}`}
            onClick={this.handleChange}
          >
            Demo
          </button>
        );
      }
    }

    ReactDOM.render(
      <Button />,
      document.getElementById('root')
    )
  </script>
</body>

</html>